<script setup lang="ts">
import { onMounted, ref } from "vue";
import { listProvinces } from "@/api/gridProvince";
import { getGridCityByProvinceId } from "@/api/gridCity";
import recycle from "@/assets/register/leaf.jpg";
import { useFeedbackInfoStoreHook } from "@/store/modules/feedbackInfo";
import { useRouter } from "vue-router";
import "plus-pro-components/es/components/form/style/css";
import {
  type PlusColumn,
  type FieldValues,
  PlusForm
} from "plus-pro-components";

defineOptions({
  name: "SelectGrid"
});

const router = useRouter();
/**列出所有省份名称 */
const getProvinces = async () => {
  try {
    const { data } = await listProvinces();
    console.log("provinces");
    console.log(data);
    const provinces = data.map(province => ({
      value: province.provinceId,
      label: province.provinceName,
      children: []
    }));
    for (const province of provinces) {
      const cityData = await getCityByProvinceId(province.value);
      const cities = cityData.map(city => ({
        value: city.cityId,
        label: city.cityName
      }));

      province.children = cities; // 将城市信息添加到对应省份的children属性中
    }
    return provinces;
  } catch (e) {
    console.log(e);
  }
};

const state = ref<FieldValues>({
  fbTime: new Date().toString()
});

const rules = {
  fbAddress: [
    {
      required: true,
      message: "请输入具体名称"
    }
  ]
};

const active = ref(1);

const columns: PlusColumn[] = [
  {
    label: "所在地区",
    labelWidth: 150,
    prop: "provinceId",
    valueType: "cascader",
    options: getProvinces(),
    tooltip: "请选择所在省"
  },
  {
    label: "具体地址",
    labelWidth: 150,
    prop: "fbAddress",
    valueType: "input",
    tooltip: "请输入详细地址"
  }
];

/**根据省份id获取城市信息 */
const getCityByProvinceId = async (provinceId: number) => {
  try {
    const { data } = await getGridCityByProvinceId(provinceId);
    console.log(data);
    return data;
  } catch (e) {
    console.log(e);
  }
};

onMounted(() => {
  getProvinces();
  console.log();
});

const handleChange = (values: FieldValues, prop: PlusColumn) => {
  console.log(values, prop, "change");
};
const handleSubmit = (values: FieldValues) => {
  const aqiFeedback = {
    monId: 1,
    fbAqiLevel: 0,
    fbInfo: "",
    fbAddress: values.fbAddress,
    provinceId: values.provinceId[0],
    cityId: values.provinceId[1],
    fbTime: new Date().toString(),
    fbImg: "",
    fbAssignTime: "",
    fbAssignState: 0,
    remarks: ""
  };
  useFeedbackInfoStoreHook().SET_AQIFEEDBACK(aqiFeedback);
  router.push("/selectAqi");
  console.log(values, "Submit");
};
const handleSubmitError = (err: any) => {
  console.log(err, "err");
};
const handleReset = () => {
  console.log("handleReset");
};
</script>

<template>
  <el-card>
    <div class="flex-container">
      <el-image :src="recycle" style="width: 50%" />
      <div class="form-container" style="width: 50%">
        <PlusForm
          class="w-[450px] m-auto"
          :columns="columns"
          :rules="rules"
          label-position="right"
          @change="handleChange"
          @submit="handleSubmit"
          @submit-error="handleSubmitError"
          @reset="handleReset"
        />
      </div>
    </div>
  </el-card>
</template>

<style>
.flex-container {
  display: flex;
}

.form-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
